<template>
  <div class="generate">
    <div class="switch">
      <el-button @click="pronounce" type="success" round plain><h3>发音相似语料</h3></el-button>
      <button class="btn" circle @click="ipt = !ipt">
        <img src="../assets/switch.png" alt="" width="60px">
      </button>
      <el-button type="warning" round plain><h3>字形相似语料</h3></el-button>
    </div>
    <div class="oringin">
      <div class="upload" v-if="ipt">
        <el-upload
          class="upload-demo"
          ref="upload"
          :auto-upload="false"
          drag
          action="http://127.0.0.1:5000/pinyinfile"
          :on-success="download"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text"><h3>将文件拖到此处，或点击上传</h3></div>
          <div class="el-upload__tip" slot="tip"><h3>只能上传txt文件</h3></div>
        </el-upload>
      </div>
      <div class="ipt" v-else>
        <textarea v-model="textarea"></textarea>
      </div>
      <div class="result">
        <textarea disabled v-model="result"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import fileDownload from 'js-file-download'
import { request } from '../network/request'

export default {
  name: "Generate",
  data() {
    return {
      ipt: true,
      textarea: '',
      result: ''
    }
  },
  methods: {
    download(res, file, fileList) {
      fileDownload(res, 'result.txt')
    },
    pronounce() {
      if (this.ipt) {
        this.$refs.upload.submit();
      } else {
        request({
          method: 'post',
          url: '/pinyintext',
          data: {'text': this.textarea}
        }).then(res => {
          this.result = '本次共' + res.data.sent_num + '个句子\n' + res.data.error_num + '个错误\n'
          + res.data.data;
        })
      }
    }
  }
};
</script>

<style scoped>
  .generate {
    width: 100%;
  }
  .oringin {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    height: 320px;
    align-items: center;
  }
  textarea {
    /* margin: 10px; */
    width: 650px;
    height: 290px;
    background-color: aqua;
    border: 2px solid;
    border-radius: 5px;
    font-size: 30px;
    box-shadow: 10px 10px 5px #888888;
  }
  .upload {
    width: 650px;
    height: 290px;
    border: 2px solid;
    border-radius: 5px;
    font-size: 30px;
    box-shadow: 10px 10px 5px #888888;
  }
  .btn {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: white;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    cursor: pointer;
  }
  .switch {
    margin: 5px;
    display: flex;
    justify-content: center;
  }
</style>
